<template>
    <el-page-header :icon="ArrowLeft">
        <template #content>
            <div class="flex items-center topic">
                <el-avatar :size="32" style="margin-right: 20px;"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                <el-tag style="margin-right: 20px;" type="success">管理员</el-tag>
                <span style="color: var(--el-text-color-regular); margin-right: 20px;">
                    {{ topic }}
                </span>
            </div>
        </template>
        <template #extra>
            <div class="flex items-center">
                <el-button>修改</el-button>
                <el-button type="primary" class="ml-2">退出</el-button>
            </div>
        </template>
    </el-page-header>
</template>
<script setup>
import { ArrowLeft } from '@element-plus/icons-vue';
import { UseStore } from '@/stores/EXINDEX.JS';
import { toRefs } from 'vue';
const { topic } = toRefs( UseStore())
</script>
<style lang="scss" >
.el-page-header {
    width: 100%;
    height: 100%;

}
.el-page-header__header {
    width: 100%;
    height: 100%;
}

.topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 0;
    box-sizing: border-box;
}
</style>